<template>
  <div class="app-container">
    <div class="page-filter mb10 fl">
      <el-form ref="filter" :model="filter" label-width="0">
        <el-form-item class="mr10 mb5 fl" style="z-index: 999">
          <ProSelect v-model="filter.pro_id" />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl">
          <SupplierSelect v-model="filter.sup_id" />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl">
          <PurchaseSelect v-model="filter.id" />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl" style="width: 300px">
          <el-button
            size="small"
            @click="app.resetFields($refs['filter'].$parent, 'filter')"
            >清 空</el-button
          >
          <el-button type="primary" size="small" @click="getList"
            >查 询</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="
              handleDialog({
                ...{ state: 0, type: '1' },
                ...{ dTitle: '新增采购订单', dType: 'add', dField: dField },
              })
            "
            >新 增</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="multipleTable"
      class="search-table"
      :data="list"
      border
      :summary-method="getSummaries"
      show-summary
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" align="center" width="56px">
        <template slot-scope="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="供应商名称" width="220px" prop="sup_name" />
      <el-table-column label="项目名称" width="220px" prop="pro_name" />
      <el-table-column label="合同编号" width="190px" prop="sn">
        <template slot-scope="{ row }">
          {{ 'LOPO' + row.sn }}
        </template>
      </el-table-column>
      <el-table-column label="货物明细" align="center" width="90px" prop="sn">
        <template slot-scope="{ row }">
          <a
            href="javascript:void(0)"
            @click="
              handleDialog({
                ...row,
                ...{ dTitle: '编辑采购订单', dType: 'edit', dField: dField },
              })
            "
            >详情</a
          >
        </template>
      </el-table-column>
      <el-table-column
        label="采购金额"
        width="140px"
        align="right"
        prop="price"
      />
      <el-table-column
        label="状态"
        align="center"
        width="80px"
        :formatter="fState"
      />
      <el-table-column
        label="采购日期"
        width="110px"
        align="center"
        prop="pur_time"
      />
      <el-table-column
        label="申请时间"
        align="center"
        width="140px"
        prop="apply_time"
      />
      <el-table-column label="备注" min-width="260px" prop="remark" />
      <el-table-column label="操作" align="center" width="90px" fixed="right">
        <template slot-scope="{ row }">
          <el-dropdown>
            <el-button type="primary" size="mini">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="
                  handleDialog({
                    ...row,
                    ...{
                      dTitle: '编辑采购订单',
                      dType: 'edit',
                      dField: dField,
                    },
                  })
                "
                >编 辑</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="
                  handleDialog({
                    ...{
                      sn: 'LOPO' + row.sn,
                      pur_id: row.id,
                      sup_id: row.sup_id,
                      price: row.price,
                    },
                    ...{
                      dTitle: '采购订单合同',
                      dType: '',
                      dField: dFieldContract,
                      dRef: 'contract',
                    },
                  })
                "
                >合 同</el-dropdown-item
              >
              <el-dropdown-item
                :disabled="row.state === 1 ? true : false"
                @click.native="
                  handleDialog({
                    ...{ pro_id: '', id: row.id },
                    ...{
                      dTitle: '项目采购',
                      dType: 'add',
                      dField: dFieldProject,
                      dRef: 'project',
                    },
                  })
                "
                >采 购</el-dropdown-item
              >
              <el-dropdown-item @click.native="handleDelete(row)"
                >删 除</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="filter.pageAll > 0"
      :total="filter.pageAll"
      :page.sync="filter.pageCurrent"
      :limit.sync="filter.pageNumber"
      @pagination="getList"
    />
    <Dialog ref="dialog" :get-data="getList" :info="dialog" />
    <Contract ref="contract" :get-data="getList" :info="dialog" />
    <Project ref="project" :get-data="getList" :info="dialog" />
  </div>
</template>

<script>
import { purs, delPur } from '@/api/purchase'
import Dialog from './components/mp/mp-dialog'
import Contract from './components/mp/contract-dialog'
import Project from './components/mp/project-dialog'
import SupplierSelect from '@/myComponents/SupplierSelect'
import PurchaseSelect from '@/myComponents/PurchaseSelect'
import page from '@/utils/page'
import ProSelect from '@/components/ProSelect'

export default {
  name: '',
  components: {
    SupplierSelect,
    Dialog,
    Contract,
    Project,
    PurchaseSelect,
    ProSelect,
  },
  extends: page,
  inject: ['app'],
  props: {
    reqList: {
      default: purs,
      type: Function,
    },
    reqDel: {
      default: delPur,
      type: Function,
    },
  },
  provide() {
    return {
      app: this.app,
    }
  },
  data() {
    return {
      total_price: 0,
      parameter: { type: '1' },
      dFieldProject: ['id', 'pro_id'],
      dFieldContract: [
        'pur_id',
        'sn',
        'sup_id',
        'id',
        'price',
        'agent',
        'phone',
        'entrust',
        'price',
        'addr',
        'sign_time',
        'tax',
        'delivery_time',
        'project',
        'person',
        'place',
        'paytype',
      ],
      dField: ['id', 'sup_id', 'remark', 'state', 'type'],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    fState(e) {
      let v = '未采购'
      if (e.state === 1) v = '已采购'
      return v
    },
    getListAfter(e) {
      this.total_price = e.summary ? e.summary.price : 0
    },
    getSummaries() {
      const sums = []
      sums[0] = '合计'
      sums[5] = this.total_price
      return sums
    },
  },
}
</script>
